<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>信息流管理</el-breadcrumb-item>
      <el-breadcrumb-item>结算单管理</el-breadcrumb-item>
    </el-breadcrumb>

    <Container class="u-mb15">
      <!-- 筛选 -->
      <el-form
        inline
        class="m-form--filter"
      >
        <el-form-item>
          <el-date-picker
            class="u-w330"
            size="mini"
            v-model="dateValue"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="dateChange"
            format="yyyy/MM/dd"
            :clearable="false"
            :picker-options="$store.state.PICKER_OPTIONS"
          >
          </el-date-picker> 
        </el-form-item>
        <el-form-item>
          <el-input 
          class="u-w200"
          size="mini" 
          v-model="filter.billId"
          placeholder="请输入结算单号"
          ></el-input>
        </el-form-item>
        <br/>
        <el-form-item>
          <el-select
            class="u-w160"
            size="mini"
            filterable
            placeholder="请选择客户名称"
            v-model="filter.customerId"
          >
            <el-option
              v-for="item in customerOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            class="u-w200"
            size="mini"
            filterable
            multiple
            collapse-tags
            placeholder="请选择全部结算方式"
            v-model="filter.settleWay"
          >
            <el-option
              v-for="item in SETTLEWAY"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item>
          <el-select
           class="u-w200"
            size="mini"
            filterable
            multiple
            collapse-tags
            placeholder="请选择发票状态"
            v-model="filter.invoiceStatus"
          >
            <el-option
              v-for="item in INVOICESTATEDATA"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button
            size="mini"
            @click="search"
          >查询</el-button>
        </el-form-item>
      </el-form>
    </Container>

    <Container>
      <!-- 表格操作 -->
      <el-form
        inline
        class="m-table--handle"
      >
        <el-form-item>
          <el-button 
          size="mini" 
          @click="exportExcel('/manage/api/bus/statements/export',requestSearch)"
          >结算单导出</el-button>
        </el-form-item>
        <el-form-item>
           <el-button
            size="mini"
            @click="handleDelete()"
          >删除</el-button>
        </el-form-item>
        <CustomTableColumn :columns.sync="tableColumn" />
      </el-form>
      <!-- 表格 -->
      <el-table
        border
        stripe
        :data="tableData"
        @selection-change="changeTableSelection"
      >
      <!--  -->
        <el-table-column
          type="selection"
          width="35"
          fixed
          :selectable="handleSelectable"
        >
        </el-table-column>
        <el-table-column
          align="center"
          v-for="(item, index) in filterTableColumn"
          :label="item.label"
          :key="index"
        >
          <template slot-scope="scope">
            
            <!-- 结算周期 -->
            <template v-if="item.rederStatus">{{ scope.row[item.reder[0]] +'-'+ scope.row[item.reder[1]] }}</template>
            <!-- 结算方式 -->
            <template v-else-if="item.prop === 'settleWay'">{{ mapOptionLabel(SETTLEWAY,scope.row.settleWay) }}</template>
            <!-- 发票状态 -->
            <template v-else-if="item.prop === 'invoiceStatus'">{{ mapOptionLabel(INVOICESTATEDATA,scope.row.invoiceStatus) }}</template>

            <!-- <template v-else-if="item.prop === 'settlementAmount'">{{scope.row.settlementAmount == null ? 0 : scope.row.settlementAmount}}</template> -->
            <!-- 其他 -->
            <template v-else>{{scope.row[item.prop]}}</template>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="100"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="$router.push({
                name: 'flow-statements-detail',
                query: {
                  action: 'detail',
                  id: scope.row.billId
                }
              })"
            >查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        :page-sizes="[50, 100, 500, 1000]"
        :page-size="page.pageSize"
        layout="total, prev, pager, next, sizes"
        :total="pageTotal"
        @size-change="handlePagerSizeChange"
        @current-change="handlePagerCurrentChange"
      />
    </Container>
  <!-- 导入 -->
  <el-dialog
    title="提示"
    :visible.sync="importVisible"
    width="850">
    <!-- <div>导入成功数据：{{importData.success}}条</div> -->
    <span slot="footer" class="dialog-footer">
      <el-button @click="importVisible = false">取 消</el-button>
      <el-button type="primary" @click="importVisible = false">确 定</el-button>
    </span>
  </el-dialog>
  </div>
</template>

<script>
import Container from "@/components/container";
import CustomTableColumn from "@/components/custom-table-column";

import { SETTLEWAY, INVOICESTATEDATA } from "@/assets/js/flow-option";
import { mapOptionLabel } from "@/util";
import { exportExcel } from '@/utils/fileDown.js'

export default {
  name: "flow-statements",
  components: {
    Container,
    CustomTableColumn
  },
  data() {
    return {
      SETTLEWAY,
      INVOICESTATEDATA,
      BASE_URL: process.env.VUE_APP_BASE_URL,
      fileList:[],
      // 下拉
      dateValue:Number(this.$route.query.dataValue)|| null,
      customerOptions: [],
      // 筛选
      filter: {
        startDate:'',
        endDate:'',
        billId: Number(this.$route.query.StateData) || null,
        invoiceStatus: Number(this.$route.query.invoiceStatus) || null,
        customerId: Number(this.$route.query.customerId) || null,
        settleWay: Number(this.$route.query.settleWay) || null
      },
      //导入
      importVisible:false,
      importData:null,

      tableData: [],
      tableSelectionData: [],
      tableColumn: [
        {
          label: "结算单号",
          prop: "billId",
          visible: true
        },
        {
          label: "结算周期",
          prop: "startDate",
          rederStatus:true,
          reder:['startDate','endDate'],
          visible: true
        },
        {
          label: "客户全称",
          prop: "customerFullName",
          visible: true
        },
        {
          label: "结算方式",
          prop: "settleWay",
          visible: true
        },
        {
          label: "实际结算金额（元）",
          prop: "settlementAmount",
          visible: true
        },
        {
          label: "发票状态",
          prop: "invoiceStatus",
          visible: true
        }
      ],
      page: {
        pageNo: 1,
        pageSize: 50
      },
      pageTotal: 0
    };
  },
  computed: {
    filterTableColumn() {
      return this.tableColumn.filter(item => item.visible);
    },
    requestSearch() {
      return {
        ...this.filter,
        ...this.page,
        invoiceStatus:this.filter.invoiceStatus == null || this.filter.invoiceStatus.length < 1 ? null : this.filter.invoiceStatus.join(),
        settleWay:this.filter.settleWay == null || this.filter.settleWay.length<1 ? null : this.filter.settleWay.join()
      };
    }
  },
  methods: {
    // 导出业务清单
    exportExcel,
    dateChange() {
      this.filter.startDate = this.formatDateTime(this.dateValue[0], "y-m-d");
      this.filter.endDate = this.formatDateTime(this.dateValue[1], "y-m-d");
    },
    mapOptionLabel,

    // 下拉
    fetchCustomerOptions() {
      this.$http({
        method: "get",
        url: "/manage/api/bus/customer/get_customer_full_name",
        params: {
          status: 0
        }
      }).then(res => {
        if (res.data.code === 0) {
          this.customerOptions = [
            {
              id: null,
              name: "全部客户"
            }
          ].concat(res.data.data);
          if (this.$route.query.customerId) {
            this.filter.customerId = Number(this.$route.query.customerId);
          }
        }
      });
    },
    // 运营人员
    getCurrentOperate(data = []) {
      let len = data.length;
      if (len) {
        let item = data[len - 1];
        return `${item.operatorBy}`;
      }
      return "-";
    },

    // 列表
    search() {
      this.page.pageNo = 1;
      this.getTable();
    },
    //获取列表
    getTable() {
      this.$http({
        method: "post",
        url: "/manage/api/bus/statements/get_list",
        data: this.requestSearch
      }).then(res => {
        if (res.data.code === 0) {
          let data = res.data.data;
          this.tableData = data.list;
          this.pageTotal = data.listCount;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    // 删除数据
    handleDelete() {
      if (!this.tableSelectionData.length) {
        return this.$message.warning("请选择需要删除的选项！");
      }
      this.removeData(
        this.tableSelectionData.map(item => item.billId).join()
        
      );
    },
    removeData(id) {
      this.$confirm("是否删除此账号？删除后不可恢复！", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
           this.$http({
            method: "post",
            url: "/manage/api/bus/statements/del",
            params: {
              billIds: id
            }
          }).then(res => {
            if (res.data.code === 0) {
              this.$message.success("删除成功!");
              this.getTable();
            } else {
              this.$message.error(res.data.msg);
            }
          });
        })
        .catch(() => {});
    },
    //判断选择框是否可选
    handleSelectable(row) {
      // return row.invoiceStatus == 1 || 0 ? true :false ;
      return true
    },
    changeTableSelection(data) {
      this.tableSelectionData = data;
    },
    handlePagerSizeChange(v) {
      this.page.pageSize = v;
      this.getTable();
    },
    handlePagerCurrentChange(v) {
      this.page.pageNo = v;
      this.getTable();
    }
  },
  activated(){
   this.getTable();
  },
  created() {
    this.fetchCustomerOptions();
    this.getTable();
  }
};
</script>